<template>
  <div class="order_box">
    <div class="msg_box">
      <div class="changeTime">
        <div class="left">
          <p class="text">开始时间</p>
          <p class="time">{{orderMsg.startTime1}}</p>
          <p class="day">{{orderMsg.startWeek1}} {{orderMsg.startTimeSlot1}}</p>
        </div>
        <div class="center">
          <p class="totel">共{{orderMsg.timeLength}}小时</p>
        </div>
        <div class="left">
          <p class="text">结束时间</p>
          <p class="time">{{orderMsg.endTime1}}</p>
          <p class="day">{{orderMsg.endWeek1}} {{orderMsg.endTimeSlot1}}</p>
        </div>
        <p class="down_time" v-if="downTime">
          <van-count-down @finish="timeFinish" use-slot format="mm:ss" :time="downTime" @change="onChange">
            <text class="item">0{{ timeData.minutes }} : </text>
            <text class="item">{{ timeData.seconds }}</text>
          </van-count-down>
        </p>
      </div>
      <div class="time_box">
        <picker
          mode="multiSelector" 
          @change="startChange" 
          :value="multiIndex" 
          :range="multiArray"
          range-key="label"
        >
          <div class="box">
            <p class="title">
              <img src="/static/images/time.png" alt="">
              开始时间
            </p>
            <p class="text">
              <span>{{orderMsg.startTime}}&nbsp;&nbsp;{{orderMsg.startTimeSlot}}</span>
              <van-icon color="#999999" name="arrow" />
            </p>
          </div>
        </picker>
        <picker 
          mode="multiSelector" 
          @change="endChange" 
          :value="multiIndex1" 
          :range="multiArray"
          range-key="label"
        >
          <div class="box">
            <p class="title">
              <img src="/static/images/time.png" alt="">
              结束时间
            </p>
            <p class="text">
              <span>{{orderMsg.endTime}}&nbsp;&nbsp;{{orderMsg.endTimeSlot}}</span>
              <van-icon color="#999999" name="arrow" />
            </p>
          </div>
        </picker>
      </div>
    </div>
    <div class="price_box">
      <div class="list">
        <p class="title"><span>卡</span>卡券抵扣</p>
        <p class="text">暂无卡券</p>
      </div>
      <div class="list">
        <p class="title"><span class="quan">券</span>优惠券</p>
        <p class="text">
          <span @click="toCoupon" class="text1" v-if="orderMsg.couponNum">{{orderMsg.couponNum}}张可用<van-icon name="arrow" /></span>
          <span class="no_text" v-else-if="!orderMsg.couponNum && !orderMsg.selectedCoupon">暂无可用优惠</span>
          <span @click="toCoupon" class="text1" v-else>已选{{orderMsg.selectedCoupon.leDiscount?orderMsg.selectedCoupon.leDiscount+'折优惠券':orderMsg.selectedCoupon.content}}</span>
        </p>
      </div>
    </div>
    <div class="order_msg tiem_box play_type">
      <p class="title">请选择支付方式</p>
      <div class="box">
        <van-radio-group :value="radio" @change="changePlay">

          
          <van-radio name="1" label-position="left">
            <div class="nr">
              <img mode="widthFix" src="/static/images/wx_play.png" alt="">
              <div>
                <p>微信支付</p>
              </div>
            </div>
          </van-radio>
          <van-radio name="2" label-position="left">
            <div class="nr b_margin">
              <img mode="widthFix" src="/static/images/ye_play.png" alt="">
              <div>
                <p>余额支付({{orderMsg.walletBalance}})</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
        
        
      </div>
    </div>
   
    
    <div :style="{paddingBottom:isIphoneXnum+100+'px'}">
      <div class="order_msg action_box">
        <div class="tir_top">预订说明</div>
        <div class="tir_one">1、如因自身原因于订单开始消费前取消：距开始时间一小时以上，收取10%平台调度费用；一小时以内，收取四小时最低消费；</div>
        <div class="tir_one">2、如因自身原因在消费中提前结束订单：扣除四小时最低消费后退回；</div>
        <div class="tir_one">2、棋牌室禁止从事黄赌毒行为；</div>
        <div class="tir_one">3、棋牌室配有自助售货机，茶叶及茶点可至售货机自助购买；</div>
        <div class="tir_one">4、本棋牌室全程自助，茶具都是经过消毒，请放心使用；</div>
        <div class="tir_one">5、本棋牌室配套茶具及摆件均可免费使用，如有损坏，按市场价赔偿；</div>
        <div class="tir_one">6、如遇设备故障等突发情况，联系电话：15102109426</div>
      </div>
      </div>

    <div class="button_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box">
        <div class="price_box1">
          <p class="totle">共{{orderMsg.timeLength}}小时</p>
          <p class="price">￥<span>{{orderMsg.realPrice}}</span></p>
        </div>
        <van-button 
          v-if="radio == '1'"
          @click="submit(0)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="border:none;width: 216rpx;height: 88rpx;line-height: 88rpx;background: #222;border-radius: 4rpx;text-align: center;color: #fff;font-size: 30rpx;"
        >微信支付</van-button>
        <van-button 
          v-if="radio == '2' && !orderMsg.balancePay"
          @click="submit(1)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="border:none;width: 216rpx;height: 88rpx;line-height: 88rpx;background: #222;border-radius: 4rpx;text-align: center;color: #fff;font-size: 30rpx;"
        >余额支付</van-button>
        <p v-if="radio == '2' && orderMsg.balancePay" class="button" @click="toCz" >立即充值</p>
      </div>
    </div> 

    <!-- 右边浮窗 -->
    <div class="right_flex">
      <div class="box" @click="toJifen(1)">
        <img src="/static/images/room_xq_icon2.png" alt="" />
        <p>充值折扣</p>
      </div>
    </div>
    <!-- 验卷弹出层 -->
    <!-- <van-popup :show="juan_show">
      <div class="juan_pop">
        <p class="title">美团验卷</p>
        <p class="input"><input cursor-spacing="150" type="text" placeholder="请输入验卷码"></p>
        <div class="button_box">
          <button @click="close" :disabled="button_loading" class="close">取消</button>
          <van-button 
          @click="yanjuanSubmit"
          :loading="button_loading" 
          type="default" 
          loading-text="验卷中..."
          custom-style="border:none;display: flex;align-items: center;justify-content:center;width: 300rpx;height: 80rpx;border-radius: 100rpx;text-align: center;font-size:28rpx;color:#333;background: linear-gradient(to right, #FFDD48 0%, #FCCA4E 100%);"
          >立即验卷</van-button>
        </div>
      </div>
    </van-popup> -->
    
    
  </div>
</template>

<script>
import { Debounce ,minTime} from "@/utils/index";
import { 
  saveOrder,
  addOrder,
  startPay,
  walletPay,
  getFakeOrder,
  updateFakeOrder,
  defaultCancelOrder
} from "@/api/index";
export default {
  data() {
    return {
      param:{},
      isIphoneXnum:0,
      orderMsg:{},
      startTime:'',
      endTime:'',
      order_time:0,
      timeData: {},
      isPaySuccess:false,
      juan_show:false,
      button_loading:false,
      radio:'1',
      loading:false,
      orderId:'',
        
      msg:{},

      multiIndex: [0,0], // 默认值
      multiIndex1: [0,0], // 默认值
      multiArray: [
        // [
        //   {
        //     label:'12月27日',
        //     value:'2022-12-27'
        //   },
        //   {
        //     label:'12月28日',
        //     value:'2022-12-28'
        //   }
        // ],
        [
          {label:'0时',value:'00'},
          {label:'1时',value:'01'},
          {label:'2时',value:'02'},
          {label:'3时',value:'03'},
          {label:'4时',value:'04'},
          {label:'5时',value:'05'},
          {label:'6时',value:'06'},
          {label:'7时',value:'07'},
          {label:'8时',value:'08'},
          {label:'9时',value:'09'},
          {label:'10时',value:'10'},
          {label:'11时',value:'11'},
          {label:'12时',value:'12'},
          {label:'13时',value:'13'},
          {label:'14时',value:'14'},
          {label:'15时',value:'15'},
          {label:'16时',value:'16'},
          {label:'17时',value:'17'},
          {label:'18时',value:'18'},
          {label:'19时',value:'19'},
          {label:'20时',value:'20'},
          {label:'21时',value:'21'},
          {label:'22时',value:'22'},
          {label:'23时',value:'23'},
        ],
        [
          {
            label:'0分',
            value:'00'
          },
          {
            label:'10分',
            value:'10'
          },
          {
            label:'20分',
            value:'20'
          },
          {
            label:'30分',
            value:'30'
          },
          {
            label:'40分',
            value:'40'
          },
          {
            label:'50分',
            value:'50'
          }
        ]
      ], 
      startChangeTime:'',// 选择开始时间
      endChangeTime:'',// 选择结束时间
      detailId:'',
      downTime:0,//支付倒计时
      timeData: {},
    };
  },
  methods: {
    
    //倒计时结束
    timeFinish(){
      wx.showModal({
        title: '提示',
        content: '付款超时，请返回重新预约',
        showCancel: false,
        confirmText:'我知道了',
        success: (res)=>{
          if (res.confirm) {//这里是点击了确定以后
            wx.navigateBack({
              delta: 1  // 返回上一级页面。
            })
          }
        }
      })
    },

    onChange(e) {
      this.timeData = e.mp.detail
      if(this.timeData.seconds < 10){
        this.timeData.seconds = `0${this.timeData.seconds}`
      }
    },

    // 点击确认时触发-开始时间
    startChange(event) {
      console.log(event)
      this.$showLoading('加载中...')
      this.multiIndex = event.mp.detail.value
      let hour = this.multiArray[0][this.multiIndex[0]].value
      let minute = this.multiArray[1][this.multiIndex[1]].value
      this.startChangeTime = `${this.orderMsg.startTime1} ${hour}:${minute}:00`
      console.log(this.startChangeTime)
      let data = {
        endTime:this.endChangeTime,
        fakeOrderId:this.detailId,
        roomId:this.orderMsg.roomId,
        startTime:this.startChangeTime
      }
      updateFakeOrder(data).then(res=>{
        if(res.statusCode == '00000'){
          if(res.data){
            this.getOrderXq()
          }
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 点击确认时触发-结束时间
    endChange(event) {
      console.log(event)
      this.$showLoading('加载中...')
      this.multiIndex = event.mp.detail.value
      let hour = this.multiArray[0][this.multiIndex[0]].value
      let minute = this.multiArray[1][this.multiIndex[1]].value
      this.endChangeTime = `${this.orderMsg.endTime1} ${hour}:${minute}:00`
      console.log(this.endChangeTime)
      let data = {
        endTime:this.endChangeTime,
        fakeOrderId:this.detailId,
        roomId:this.orderMsg.roomId,
        startTime:this.startChangeTime
      }
      updateFakeOrder(data).then(res=>{
        if(res.statusCode == '00000'){
          if(res.data){
            this.getOrderXq()
          }
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 跳转团购
    toJifen(num){
      wx.navigateTo({
        url: `/pages/recharge/main?active=${num}`,
      });
    },

    // 订单详情
    getOrderXq(){
      this.$showLoading('加载中...')
      let data = {
        fakeOrderId:this.detailId,
      }
      console.log(data)
      getFakeOrder(data).then(res=>{
        if(res.statusCode == '00000'){
          this.orderMsg = res.data
          this.startChangeTime = res.data.startTime
          this.endChangeTime = res.data.endTime
          this.getChangeTime(res.data.startTime,res.data.endTime)

          // 开始结束时间
          let start = this.orderMsg.startTimeSlot1.split(':')[0]
          let end = this.orderMsg.endTimeSlot1.split(':')[0]
          let timeArr = this.multiArray[0]
          let startIndex = timeArr.findIndex(item=>start == item.value)
          let endIndex = timeArr.findIndex(item=>end == item.value)
          console.log(startIndex,endIndex)
          this.multiIndex = [startIndex,0]
          this.multiIndex1 = [endIndex,0]
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 选中的开始和结束时间-洗数据
    getChangeTime(startTime,endTime){
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let data = {
        startTime1:startTime.split(' ')[0], // 比如：2022-12-27
        endTime1:endTime.split(' ')[0],// 比如：2022-12-27
        startTimeSlot1:`${startTime.split(' ')[1].split(':')[0]}:${startTime.split(' ')[1].split(':')[1]}`,// 比如：12:00
        endTimeSlot1:`${endTime.split(' ')[1].split(':')[0]}:${endTime.split(' ')[1].split(':')[1]}`,// 比如：12:00
        startWeek1:weeks[new Date(startTime).getDay()],// 周一
        endWeek1:weeks[new Date(endTime).getDay()],// 周一
        timeLength:this.getHour(startTime,endTime)
      }
      console.log("====时间===")
      this.orderMsg = Object.assign(data,this.orderMsg)
      console.log(this.orderMsg)
      wx.hideLoading()
    },

    // 算选择多少小时
    getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return (ms / 1000 / 60 / 60).toFixed(1);  //小时
    },

    // 跳转充值
    toCz(){
      wx.navigateTo({
        url: `/pages/recharge/main`,
      });
    },

    // 选择支付方式
    changePlay(e){
      console.log(e)
      this.radio = e.mp.detail
    },

    // 跳转优惠券
    toCoupon(){
      wx.navigateTo({
        url: `/pages/confirm_order/coupon/main?orderId=${this.orderMsg.fakeOrderId}`,
      });
    },

    // 下单支付
    submit:Debounce(function (state) {
      console.log('-00000000----')
      console.log(state)
      const that=this
      that.loading = true
      wx.showLoading({
        title: '支付中...'
      })
      //不存在订单id
      if(!this.orderId){
        let data = {
          // endTime:this.msg.apiEndTime,
          // startTime:this.msg.apiStartTime,
          // roomId:this.msg.roomId,
          // storeId:this.msg.storeId
          fakeOrderId:this.detailId
        }
        // if(!this.orderId){
        //   data.fakeOrderId = this.orderMssg.fakeOrderId
        //   delete data.orderId
        // }else{
        //   data.fakeOrderId = this.orderMsg.fakeOrderId
        //   data.orderId = this.orderId
        // }
        addOrder(data).then(res=>{
          if(res.statusCode == '00000'){
            this.downTime = res.data.timeOut * 1000
            this.orderId=res.data.orderId
            let objReturn = !state ? startPay({orderId:res.data.orderId}):walletPay({orderId:res.data.orderId})
            objReturn.then(item=>{
              if(item.statusCode == '00000'){
                setTimeout(() => {
                  if(!state){
                    wx.requestPayment({
                      timeStamp:item.data.timeStamp,
                      nonceStr:item.data.nonce_str,
                      package:`prepay_id=${item.data.prepay_id}`,
                      signType:"MD5",
                      paySign:item.data.sign,
                      success:function(succ){
                        console.log(succ)
                        if(succ.errMsg === "requestPayment:ok"){
                          that.isPaySuccess=true
                          wx.reLaunch({
                            url: `/pages/confirm_order/success/main?orderId=${that.orderId}`,
                          });            
                        }
                      },
                      fail:function(err){
                        that.loading = false
                        wx.hideLoading()
                        that.$toast('支付失败！')
                      }
                    })
                    return
                  }
                  that.loading = false
                  wx.reLaunch({
                    url: `/pages/confirm_order/success/main?orderId=${that.orderId}`,
                  });    
                }, 1000); 
              }else{
                that.loading = false
                that.isPaySuccess = false
                wx.hideLoading()
                that.$toast(item.message)
              }
            }).catch(err=>{
              wx.hideLoading()
              that.loading = false
              that.$toast('支付失败，请重新发起支付~')
            })
          }else{
            wx.hideLoading()
            that.loading = false
            if(res.statusCode == '00001'){
              wx.showModal({
                title: '提示',
                content: '亲，不好意思，该时间段已被别人抢先预定了，请返回重新选择~',
                showCancel: false,
                confirmText:'我知道了',
                success: function (res) {
                  if (res.confirm) {
                    wx.navigateBack({
                      delta: 1  // 返回上一级页面。
                    })
                  }
                }
              })
              return
            }
            wx.showToast({
              title: res.message, 
              icon: 'none',
              duration: 1500
            })
          }
        })
      
      }else{
        //存在orderid
        let objReturn = !state ? startPay({orderId:this.orderId}):walletPay({orderId:this.orderId})
        objReturn.then(item=>{
          if(item.statusCode == '00000'){
            setTimeout(() => {
              if(!state){
                wx.requestPayment({
                  timeStamp:item.data.timeStamp,
                  nonceStr:item.data.nonce_str,
                  package:`prepay_id=${item.data.prepay_id}`,
                  signType:"MD5",
                  paySign:item.data.sign,
                  success:function(succ){
                    console.log(succ)
                    if(succ.errMsg === "requestPayment:ok"){
                      that.isPaySuccess=true
                      wx.reLaunch({
                        url: `/pages/confirm_order/success/main?orderId=${that.orderId}`,
                      });    
                    }
                  },
                  fail:function(err){
                    wx.hideLoading()
                    that.loading = false
                    hat.$toast('支付失败！')
                  }
                })
                return
              }
              that.loading = false
              wx.reLaunch({
                url: `/pages/confirm_order/success/main?orderId=${that.orderId}`,
              });    
            }, 1000); 
          }else{
            that.loading = false
            that.isPaySuccess = false
            wx.hideLoading()
            that.$toast(item.message)
          }
        }).catch(err=>{
          wx.hideLoading()
          that.loading = false
          that.$toast('支付失败，请重新发起支付~')
        })
      }
    },500),
  },
  onShow(){
    if(!this.isPaySuccess){
      this.getOrderXq()
    }
    console.log("dddd")
    this.radio = '1'
    this.isPaySuccess=false
    this.loading = false
    
  },
  onLoad(options) {
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
    if(options.id){
      this.detailId = options.id
    }
    this.orderId = null
    this.downTime = 0
  },
  onUnload(){
    console.log('退出')
    if(this.downTime){
      defaultCancelOrder().then(res=>{
      })
    }
    this.downTime=0
    this.button_loading = false
    
  },
  onHide(){
    // this.order_time=0
    // this.orderId=null
  }
};
</script>

<style lang="scss" scoped>
.order_box{
  min-height: 100vh;
  background: #f0f0f0;
  padding-top:20rpx;
  .msg_box{
    width: 94%;
    background: #fff;
    margin:0 auto;
    padding-bottom:24rpx;
    .changeTime{
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:30rpx;
      position: relative;
      .down_time{
        position: absolute;
        top:0;
        right:0;
        background: #FAF1EC;
        padding:4rpx 0rpx;
        width: 120rpx;
        text-align: center;
        border-bottom-left-radius: 20rpx;
        .item{
          color:#FF4357;
          font-weight: 500;
          font-size:30rpx;
        }
      }
      .text{
        font-size:24rpx;
        color:#000;
        margin-bottom:20rpx;
      }
      .time{
        font-size:34rpx;
        font-weight: bold;
        margin-bottom:20rpx;
      }
      .day{
        font-size:24rpx;
      }
      .center{
        display: flex;
        align-items: center;
        .totel{
          width: 160rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: linear-gradient(to right, #2e3341 50%,#4f5363 100%);
          text-align: center;
          border-radius: 100rpx;
          color:#fff;
          font-size:24rpx;
        }
      }
    }
    .time_box{
      margin:0 30rpx;
      img{
        width: 32rpx;
        height: 32rpx;
        margin-right:4rpx;
      }
      .box{
        background: #F5F5F5;
        padding:0 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 104rpx;
        border-bottom:1px solid #DFDFDF;
        p{
          display: flex;
          align-items: center;
          font-size:26rpx;
          color:#000;
          font-weight: 500;
          span{
            margin-right:8rpx;
          }
        }
        &:last-child{
          border-bottom:none;
        }
      }
    }
  }
  .list{
    padding: 0 30rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
  }
  .price_box{
    width: 94%;
    background: #fff;
    margin:20rpx auto 0 auto;
    .list{
      justify-content: space-between;
      .title{
        font-size:28rpx;
        font-weight: 500;
        color:#000;
        display: flex;
        align-items: center;
        span{
          display: flex;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          background: #E9C994;
          border-radius: 8rpx;
          text-align: center;
          color:#fff;
          font-size:20rpx;
          margin-right:8rpx;
          align-items: center;
          justify-content: center;
        }
        .quan{
          background: linear-gradient(to right,#FF4357, #FE6E34);
        }
      }
      .text{
        font-size:26rpx;
        font-weight: 500;
        color:#9A9A9A;
        .text1{
          display: inline-block;
          background: linear-gradient(to right,#FF4357, #FE6E34);
          border-radius: 4rpx;
          color:#fff;
          padding:2rpx 8rpx;
          font-size:26rpx;
        }
      }
    }
  }





  .order_msg{
    position: relative;
    width: 94%;
    margin:0 auto;
    background: #fff;
    margin-top:100rpx;
    p{
      padding: 0 30rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      font-size:30rpx;
      color:#656565;
      span{
        color:#2c2c2c;
      }
   
      input{
        text-align: right;
        font-size: 30rpx;
        color:#656565;
      }
    }
  }
  .tiem_box{
    /deep/ .van-radio__label{
      flex: 1;
    }
    p{
      justify-content: space-between;
      flex:1;
      span{
        color:#71D561
      }
    }
  }
  .play_type{
    margin-top:0;
    .title{
      font-weight: bold;
      color:#000;
      font-size:32rpx;
    }
    img{
      width: 40rpx;
      height: 40rpx;
      margin-right:30rpx;
    }
    .box{
      padding:10rpx 0 0 0;
      width:90%;
      margin:0 auto;
      /deep/ .van-radio{
        justify-content: space-between;
        height: 100rpx;
      }
      /deep/ .van-radio__icon--checked{
        background: #80A952;
        border-color:#80A952;
      }
      // /deep/ .van-radio__label--left{
      //   width: 100%;
      //   text-align: left;
      // }
      .nr{
        display: flex;
        align-items: center;
        div{
          justify-content: end;
          padding-left:0;
          font-weight: 500;
          flex: 1;
          p{
            height: auto;
            padding-left:0;
            border-bottom:none;
            display: flex;
            align-items: baseline;
            color:#323233 !important;
            font-size:28rpx;
          }
          img{
            width: 40rpx;
          }
        }
      }
    }
  }
  .totle_tiem{
    padding:0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #f4f4f4;
    font-size:30rpx;
    color:#71D561;
    text-align: right;
  }
  .price_box{
    p{
      display: flex;
      align-items: center;
      justify-content: space-between;
      span{
        flex: 1;
        text-align: right;
      }
      .price_t{
        font-weight: 500; 
      }
      .no_text{
        color:#9A9A9A;
        
      }
      .text{
        color:#71D561;
      }
    }
  }
  .action_box{
    margin-top: 20rpx;
    padding-bottom: 10rpx;
    .tir_top{
      // height: 25rpx;
      padding: 0 30rpx;
      height: 90rpx;
      line-height:90rpx ;
      font-weight: 500; 
      border-bottom:1px solid #f4f4f4;
      margin-bottom: 10rpx;
      color:#333;
      font-size:30rpx;
      font-weight: bold;
    }
    .tir_one{
       padding: 0 30rpx;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      // border-bottom:1px solid #f4f4f4;
       font-size:26rpx !important;
      color:#666;
    }
  }
  .button_box{
    width: 100%;
    height: 146rpx;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    // ededed
    border-top:1px solid #e4e4e4;
    .box{
      width: 92%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      .price_box1{
        .totle{
          color:#FF4D50;
          font-size:28rpx;
          margin-bottom:10rpx;
        }
      }
      .price{
        font-size:30rpx;
        text-align: right;
        margin-right: 20px;
        display: flex;
        align-items: center;
        span{
          font-size: 46rpx;
          font-weight: 500;
        }
      }
      .button{
        border:none;
        width: 216rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #222;
        border-radius: 4rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
      }
      .meituan{
        margin-right:30rpx;
        background: linear-gradient(to right, #FFDD48 50%, #FCCA4E 100%);
        color:#333;
      }
    }
  }
  /deep/ .van-popup{
    width: 80%;
    border-radius: 20rpx;
  }
  .juan_pop{
    width: 100%;
    height: 370rpx;
    background: #fff;
    .title{
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color:#333;
      font-size:28rpx;
    }
    
    .input{
      width: 80%;
      height: 90rpx;
      margin:0 auto;
      border:1px solid #eee;
      display: flex;
      align-items: center;
      padding:0 30rpx;
      border-radius: 10rpx;
      font-size:34rpx;
    }
    .button_box{
      width: 90%;
      padding: 0 30rpx;
      display: flex;
      height: 150rpx;
      align-items: center;
      justify-content:space-between;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      .close{
        border:1px solid #eee;
        display: flex;
        align-items: center;
        justify-content:center;
        width: 200rpx;
        height: 80rpx;
        border-radius: 100rpx;
        text-align: center;
        font-size:28rpx;
        color:#333;
        background: none;
        margin:0;
      }
      button::after {
        border: none;
      }
      .submit{
        
      }
    }
  }
  .right_flex{
    position: fixed;
    right:0;
    bottom:260rpx;
    .box{
      width: 164rpx;
      height: 92rpx;
      background: #80A952;
      border-radius: 23px 0px 0px 23px;
      margin-bottom:24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#fff;
      font-size:26rpx;
      font-weight: 500;
      img{
        width: 40rpx;
        height: 40rpx;
        margin-right:8rpx;
      }
      p{
        width: 70rpx;
      }
    }
  }
}
</style>